$(function () {
    $("[name='info']").hide();
    $("[name='infoProduct']").hide();

    $("[name='FISH']").on('mouseover',function () {
        $("[name='FISH']").parent().after("<div name='fish pop'> Click it to buy fish pets </div>");

        $("[name='infoProduct']").hide();
        $("[name='CatalogInfo']").remove();
        $("[name='info']").empty();

        var queryString = "categoryId="+ "FISH";
        $.get("ShowInfoOfProduct",queryString,function () {
        })

        $("[name='info']").append("<div name='CatalogInfo' id='Catalog'>");
        $("[name='info']").append("<table>\n" +
            "<tr>\n" +
            "<th>Product ID</th>\n" +
            "<th>Name</th>\n" +
            "</tr>");

        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'FI-FW-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Koi' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='FI-FW-01' id='FI-FW-01' value='more' />");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'FI-FW-02' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Goldfish' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='FI-FW-02' id='FI-FW-02' value='more' />\n");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'FI-SW-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Angelfish' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='FI-SW-01'id='FI-SW-01' value='more'>\n");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'FI-SW-02' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Tiger Shark' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='FI-SW-02' id='FI-SW-02' value='more'>\n");


        $("[name='info']").append("</table>");
        $("[name='info']").append("</div>");
        $("[name='info']").show();



        $("#FI-FW-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-4'>" + 'EST-4' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Spotted Koi' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-5'>" + 'EST-5' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Spotless Koi' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#FI-FW-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-20'>" + 'EST-20' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Goldfish' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-21'>" + 'EST-21' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Female Goldfish' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#FI-SW-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-1'>" + 'EST-1' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Large Angelfish' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-2'>" + 'EST-2' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Small Angelfish' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#FI-SW-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-4'>" + 'EST-3' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Toothless Tiger Shark' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

    })

    $("[name='FISH']").on('mouseout',function (e) {
        $("[name='fish pop']").remove();
    })






    $("[name='BIRDS']").on('mouseover',function () {
        $("[name='BIRDS']").parent().after("<div name='birds pop'> Click it to buy birds pets </div>");

        $("[name='infoProduct']").hide();
        $("[name='CatalogInfo']").remove();
        $("[name='info']").empty();
        var queryString = "categoryId="+ "BIRDS";
        $.get("ShowInfoOfProduct",queryString,function () {
        })
        $("[name='info']").append("<div name='CatalogInfo' id='Catalog'>");
        $("[name='info']").append("<table>\n" +
            "<tr>\n" +
            "<th>Product ID</th>\n" +
            "<th>Name</th>\n" +
            "</tr>");

        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'AV-CB-01' + "</td>");

        $("[name='info']").append("</td>\n" +
            "<td>" + 'Amazon Parrot' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='AV-CB-01' id='AV-CB-01' value='more'>");

        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'AV-SB-02' + "</td>");

        $("[name='info']").append("</td>\n" +
            "<td>" + 'Finch' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='AV-SB-02' id='AV-SB-02' value='more'>");


        $("[name='info']").append("</table>");
        $("[name='info']").append("</div>");
        $("[name='info']").show();


        $("#AV-CB-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-18'>" + 'EST-18' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Amazon Parrot' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#AV-SB-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-19'>" + 'EST-19' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Finch' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })


    })

    $("[name='BIRDS']").on('mouseout',function (e) {
        $("[name='birds pop']").remove();

    })








    $("[name='DOGS']").on('mouseover',function () {
        $("[name='DOGS']").parent().after("<div name='dogs pop'> Click it to buy dogs pets </div>");

        $("[name='infoProduct']").hide();
        $("[name='CatalogInfo']").remove();
        $("[name='info']").empty();
        var queryString = "categoryId="+ "DOGS";
        $.get("ShowInfoOfProduct",queryString,function () {
        })
        $("[name='info']").append("<div name='CatalogInfo' id='Catalog'>");
        $("[name='info']").append("<table>\n" +
            "<tr>\n" +
            "<th>Product ID</th>\n" +
            "<th>Name</th>\n" +
            "</tr>");

        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'K9-BD-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Bulldog' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='K9-BD-01' id='K9-BD-01' value='more'>");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'K9-CW-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Chihuahua' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='K9-CW-01' id='K9-CW-01' value='more'>");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'K9-DL-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Dalmation' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='K9-DL-01' id='K9-DL-01' value='more'>");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'K9-PO-02' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Poodle' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='K9-PO-02' id='K9-PO-02' value='more'>");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'K9-RT-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Golden Retriever' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='K9-RT-01' id='K9-RT-01' value='more'>");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'K9-RT-02' + "</td");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Labrador Retriever' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='K9-RT-02' id='K9-RT-02' value='more'>");


        $("[name='info']").append("</table>");
        $("[name='info']").append("</div>");
        $("[name='info']").show();



        $("#K9-BD-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-6'>" + 'EST-6' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Male Adult Bulldog' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-7'>" + 'EST-7' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Female Puppy Bulldog' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#K9-CW-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-26'>" + 'EST-26' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Chihuahua' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-27'>" + 'EST-27' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Female Chihuahua' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#K9-DL-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-10'>" + 'EST-10' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + '\tSpotted Adult Female Dalmation' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-9'>" + 'EST-9' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Spotless Male Puppy Dalmation' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#K9-PO-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-8'>" + 'EST-8' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Male Puppy Poodle' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#K9-RT-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-28'>" + 'EST-28' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Female Golden Retriever' + "</td>\n" +
                "</tr>");


            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#K9-RT-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-22'>" + 'EST-22' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Labrador Retriever' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-23'>" + 'EST-23' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Female Labrador Retriever' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-24'>" + 'EST-24' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Labrador Retriever' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-25'>" + 'EST-25' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Female Labrador Retriever' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

    })

    $("[name='DOGS']").on('mouseout',function (e) {
        $("[name='dogs pop']").remove();
    })











    $("[name='REPTILES']").on('mouseover',function () {
        $("[name='REPTILES']").parent().after("<div name='reptiles pop'> Click it to buy reptiles pets </div>");
        $("[name='CatalogInfo']").remove();

        $("[name='infoProduct']").hide();
        $("[name='info']").empty();
        var queryString = "categoryId="+ "REPTILES";
        $.get("ShowInfoOfProduct",queryString,function () {
        })
        $("[name='info']").append("<div name='CatalogInfo' id='Catalog'>");
        $("[name='info']").append("<table>\n" +
            "<tr>\n" +
            "<th>Product ID</th>\n" +
            "<th>Name</th>\n" +
            "</tr>");

        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'RP-LI-02' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Iguana' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='RP-LI-02' id='RP-LI-02' value='more'>");



        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td>" + 'RP-SN-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Rattlesnake' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='RP-SN-01' id='RP-SN-01' value='more'>");


        $("[name='info']").append("</table>");
        $("[name='info']").append("</div>");
        $("[name='info']").show();


        $("#RP-LI-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-13'>" + 'EST-13' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Green Adult Iguana' + "</td>\n" +
                "</tr>");


            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })


        $("#RP-SN-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-11'>" + 'EST-11' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Venomless Rattlesnake' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-12'>" + 'EST-12' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Rattleless Rattlesnake' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })


    })

    $("[name='REPTILES']").on('mouseout',function (e) {
        $("[name='reptiles pop']").remove();
  })







    $("[name='CATS']").on('mouseover',function () {
        $("[name='CATS']").parent().after("<div name='cats pop'> Click it to buy cats pets </div>");
        $("[name='CatalogInfo']").remove();

        $("[name='infoProduct']").hide();
        $("[name='info']").empty();
        var queryString = "categoryId="+ "CATS";
        $.get("ShowInfoOfProduct",queryString,function () {
        })
        $("[name='info']").append("<div name='CatalogInfo' id='Catalog'>");
        $("[name='info']").append("<table>\n" +
            "<tr>\n" +
            "<th>Product ID</th>\n" +
            "<th>Name</th>\n" +
            "</tr>");

        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td name='FL-DLH-02'>" + 'FL-DLH-02' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Persian' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='FL-DLH-02' id='FL-DLH-02' value='more'>");


        $("[name='info']").append("<tr>\n" +
            "<td>");
        $("[name='info']").append("<td name='FL-DSH-01'>" + 'FL-DSH-01' + "</td>");
        $("[name='info']").append("</td>\n" +
            "<td>" + 'Manx' + "</td>\n" +
            "</tr>");
        $("[name='info']").append("<input type='button' name='FL-DSH-01' id='FL-DSH-01' value='more'>");


        $("[name='info']").append("</table>");
        $("[name='info']").append("</div>");
        $("[name='info']").show();


        $("#FL-DLH-02").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-16'>" + 'EST-16' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Female Persian' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-17'>" + 'EST-17' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Adult Male Persian' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

        $("#FL-DSH-01").on('click',function () {
            $("[name='info']").hide();
            $("[name='ProductInfo']").remove();
            $("[name='infoProduct']").empty();

            $("[name='infoProduct']").append("<div name='ProductInfo' id='Catalog'>");
            $("[name='infoProduct']").append("<table>\n" +
                "<tr>\n" +
                "<th>Item ID</th>\n" +
                "<th>Description</th>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-14'>" + 'EST-14' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'Tailless Manx' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("<tr>\n" +
                "<td>");
            $("[name='infoProduct']").append("<a href='ViewItem?itemId=EST-15'>" + 'EST-15' + "</a>");

            $("[name='infoProduct']").append("</td>" +
                "<td>" + 'With tail Manx' + "</td>\n" +
                "</tr>");

            $("[name='infoProduct']").append("</table>");
            $("[name='infoProduct']").append("</div>");
            $("[name='infoProduct']").show();
        })

    })

    $("[name='CATS']").on('mouseout',function (e) {
        $("[name='cats pop']").remove();
    })




})